﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/assets/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/assets/css/responsive.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/jquery-2.1.0.js"></script>
    <style type="text/css">
        .flash {
            position: relative;
            width: 140px;
            height: 140px;
        }
        .flash img {
            width: 150px;
        }
        #kong{

            width: 1519px;
            height: 120px;
            background-color: white;
            position: absolute;
            top: 0px;
            opacity: 0.4;
        }
        .flash .flash-bar {
            position: absolute;
            left: -0px;
            width: 100px;
            height: 100%;
            transform: skewX(-0deg);
            transform-origin: 0 100%;
        }

        .flash:hover .flash-bar {
            left: 160px;
            transition: left ease-in-out 1s;
        }
        .header:before {
            <%--background-image: url(${pageContext.request.contextPath}/style/assets/酒店图片/hotel7.jpg);--%>
            opacity: 0.5;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            filter: blur(3px);
        }

        #acc {
            width: 300px;
            height: 40px;
            margin-left: 30px;
            border-radius: 15px;
        }

        #pwd {
            width: 300px;
            height: 40px;
            margin-left: 43px;
            border-radius: 15px;
        }

        #regi {
            width: 625px;
            height: 500px;
            background: url("../../style/img/hotel88.png");
            padding: 100px;
        }

        .shuru {
            width: 400px;
            height: 50px;
            margin-top: 12px;
        }

        #regi span {
            font-size: 20px;
            color: white;
        }

        .input4 {
            width: 250px;
            height: 10px;
            border-radius: 10px;
            padding: 15px;
        }

        #headdiv {
            position: relative;
            left: 130px;
            font-size: 20px;
            color: #FFB800;
            font-family: LiSu;
            width: 200px;
        }

        #zhucebtn {
            width: 80px;
            height: 40px;
            border-radius: 20px;
            position: relative;
            left: 350px;
            padding: 8px;
        }


        .msg span {
            font-size: 16px;
            margin-left: 110px;
            color: red;
        }
    </style>
</head>

<body>
<!-- main wrapper -->
<div class="wrapper">
    <!-- header -->
    <!-- /header -->
    <!-- parallax -->
    <section style="background-image: url(${pageContext.request.contextPath}/style/assets/酒店图片/20201209105716.png);background-position-y:-160px;height: 880px;background-repeat: no-repeat;padding: 0">
    <div id="kong"></div>
        <div style="margin-bottom: 100px">
        <div class="header-top">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9 col-md-8 col-sm-8 col-xs-12">
                        <div class="header-location"><i class="fa fa-home"></i>
                            <a href="#">河南省郑州市金水区六位帝皇玩大酒店</a>
                        </div>
                        <div class="header-email"><i class="fa fa-envelope-o"></i>
                            <a href="mailto:support@email.com">123456@email.com</a>
                        </div>
                        <div class="header-phone"><i class="fa fa-phone"></i>
                            <a href="#">400-8208820</a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
                        <div class="header-social pull-right">
                            <a href="#"><i class="fa fa-twitter"></i></a>
                            <a href="#"><i class="fa fa-facebook"></i></a>
                            <a href="#"><i class="fa fa-google-plus"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-bottom">
            <nav class="navbar navbar-universal navbar-custom">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="logo">
                                <a href="index.html" class="navbar-brand page-scroll">
                                    <img src="${pageContext.request.contextPath}/style/assets/酒店图片/hotel21.png"
                                         style="height: 50px;" alt="logo">
                                </a>
                                <a herf="#" style="font-size: 25px;font-family:仿宋; font-weight:bold;">六位帝皇玩</a>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="navbar-header">
                                <button type="button" data-toggle="collapse" data-target=".navbar-main-collapse"
                                        class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span
                                        class="icon-bar"></span><span class="icon-bar"></span><span
                                        class="icon-bar"></span></button>
                            </div>
                            <div class="collapse navbar-collapse navbar-main-collapse">
                                <ul class="nav navbar-nav navbar-right">
                                    <li>
                                        <a href="reservelogin.jsp">首页</a>
                                    </li>
                                    <li>
                                        <a href="about-us.html">关于我们</a>
                                    </li>
                                    <li>
                                        <a href='${pageContext.request.contextPath}/view/reception/reserve.jsp'>房间预订</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="flash">
                        <div class="flash-bar"><img
                                src="${pageContext.request.contextPath}/style/assets/酒店图片/hotel21.png"/></div>
                    </div>
                    <div class="parallax-text">
                        <h1 style="color: burlywood; font-size: 50px;font-family: YouYuan">六位帝皇玩</h1>
                        <h2 style="color: coral;">（距离百年老店还有99年）</h2>
                        <span><br/></span>
                        <p style="color: white;">
                            六位帝皇玩大酒店历史悠久，康熙年间，<br/>康熙皇帝微服私访，就从六位帝皇玩大酒店门前一百里路过。
                            <br/> 风格独特，既有皇家的尊贵享受，还有后现代主义对客人的批判。
                            <br/> 地理位置优越，四面商务CBD没有环绕，远离繁华喧嚣。
                            <br/> 配套设施齐全，厕所出门右拐。
                        </p>
                    </div>
                </div>
                <!-- planner-->
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 planner">
                    <div class="planner-block" style="width: 450px">
                        <form class="form-planner form-horizontal">
                            <div class="row">
                                <div class="form-group">
                                    <label>手机号</label>
                                    <input type="text" name="name" id="acc" autocomplete="off"/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <label>密码</label>
                                    <input type="password" name="password" id="pwd" autocomplete="off"/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <div class="planner-check-availability">
                                        <a onclick="Login()" class="btn btn-default">登录</a>
                                        <%--<a href="" class="btn btn-default"
                                        style="background: orange">注册</a>--%>
                                        <input type="button" class="btn btn-default"
                                               style="background: orange" id="regbtn" value="注册"/>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- /planner-->
            </div>
        </div>

    </section>
</div>

<%--注册前台代码--%>
<div id="regi" style="display: none">
    <div id="headdiv">
        六位帝皇玩大酒店
    </div>
    <div class="shuru">
        <span>电话：</span><input type="text" placeholder="请输入常用手机号码" maxlength="11" class="input4" id="phone"
                               style="margin-left: 40px;"/>
        <div class="msg"><span id="phoRegd" ></span>
        </div>
        <div class="shuru">
            <span>密码：</span><input type="password" maxlength="6"placeholder="请输入密码" class="input4" id="pwd1"
                                   style="margin-left: 40px;"/>
            <div class="msg"><span id="pwdEpt1"></span></div>
        </div>
        <div class="shuru">
            <span>确认密码：</span><input type="password" maxlength="6" placeholder="请再次输入密码" class="input4" id="pwd2"/>
            <div class="msg"><span id="pwdEpt2"></span></div>
        </div>
        <div class="shuru">
            <span>姓名：</span><input type="text" placeholder="请输入真实姓名" class="input4" id="uname"
                                   maxlength="4"  style="margin-left: 40px;"/><br/>
            <div class="msg"><span id="nameEpt"></span></div>
        </div>
        <div id="zhucebtn">
            <input type="button" class="btn btn-default" style="background: orange" id="sub" value="注册"/>
        </div>
    </div>


    <%-- 注册模块js代码 --%>
    <script>
        //注册点击事件
        $("#regbtn").click(function () {
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    title: '新用户注册'
                    , type: 1
                    , content: $("#regi")
                    , offset: '100px'
                    , moveOut: true
                    , resize: false
                    , area: ['625px', '560px']
                });
            })
        })
    </script>
    <script>
        //失去焦点事件
        $("#phone").on('blur', function () {
            //验证电话
            var phone = $("#phone").val();
            let reg = /^[1]([3-9])[0-9]{9}$/;
            if (!reg.test(phone) || phone === '') {
                $(this).val("");
                $("#phoRegd").html("请输入11位电话号码");
                return false;
            } else {
                $("#phoRegd").html("");
                return true;
            };
            if (phone == null || phone == "") {
                $("#phoRegd").prop("className", "red");
                $("#phoRegd").html("手机号不能为空");
                $("#sub").hide();
            } else {
                $("#phoRegd").html("");
                $("#sub").show();
                $.ajax({
                    url: "${pageContext.request.contextPath}/findUser?method=findByPhone",
                    data: {phone: phone},
                    type: "post",
                    success: function (i) {
                        if (i == 0) {
                            $("#phoRegd").html("手机号码已注册，请直接登录");
                            $("#sub").hide();
                        } else {
                            $("#phoRegd").html("");
                            $("#sub").show();
                        }
                    }
                })
            }
        });

        $("#pwd1").blur(function () {
            var pwd1 = $("#pwd1").val();
            if (pwd1 == null || pwd1 == "") {
                $("#pwdEpt1").html("密码不能为空");
                $("#sub").hide();
            } else {
                $("#pwdEpt1").html("");
                $("#sub").show();
            }
        });

        $("#pwd2").on('blur', function () {
            var pwd1 = $("#pwd1").val();
            var pwd2 = $("#pwd2").val();
            if (pwd2 == null || pwd2 == "") {
                $("#pwdEpt2").html("密码不能为空");
                $("#sub").hide();
            } else {
                if (pwd2 != pwd1) {
                    $("#pwdEpt2").html("请输入相同的密码");
                    $("#sub").hide();
                } else {
                    $("#pwdEpt2").html("");
                    $("#sub").show();
                }
            }
        });

        $("#uname").on('blur', function () {
            var name = $("#uname").val();
            let reg = /^[\u4e00-\u9fa5]{2,6}$/;
            if (!reg.test(name) || name=='') {
                $("#nameEpt").html("<span class='red'>请输入2~6位中文</span>");
                $("#sub").hide();
                return false;
            }else{
                $("#nameEpt").html("");
                $("#sub").show();
                return true;
            }
        });

        //新用户注册
        $("#sub").on('click', function () {
            var phone = $("#phone").val();
            var pwd = $("#pwd1").val();
            var name = $("#uname").val();

            $.ajax({
                url: "${pageContext.request.contextPath}/findUser?method=add",
                data: {method: "register", phone: phone, pwd: pwd, name: name},
                type: "post",
                success: function (i) {
                    if (i == 1) {
                        layer.msg("注册成功，请登录！");
                        // $("#sub").hide();
                        setTimeout(function () {
                            layer.closeAll();
                        }, 1500);
                    } else {
                        layer.msg("注册失败，请重新注册！");
                        $("#nameEpt").html("");
                        $("#sub").show();
                    }
                }
            })
        })
    </script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/style/assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/assets/js/tether.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/assets/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/assets/js/moment.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/style/assets/js/jquery.smartmenus.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/style/assets/js/jquery.parallax.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/style/assets/js/jquery.shuffle.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/style/assets/js/owl.carousel.min.js"></script>
    <!---<script type="text/javascript" src="http://ditu.google.cn/maps/api/js"></script>--->
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/assets/js/map.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/assets/js/main.js"></script>
    <script>
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            var end1 = laydate.render({
                elem: '#test2' //指定元素
                ,
                min: 1
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#test1' //指定元素
                ,
                min: 0,
                done: function (value, date) {
                    //							alert(123);
                    end1.config.min = {
                        year: date.year,
                        month: date.month - 1,
                        date: date.date + 1
                    }
                }
            });
            laydate.render({
                elem: '#test1',
                value: new Date(),
                isInitValue: true //是否允许填充初始值，默认为 true
            });
        });
    </script>
    <!-- /Scripts -->
    <script>

        function Login() {
            var acc = $("#acc").val();
            var pwd = $("#pwd").val();
            $.ajax({
                url: "/Hotel/findUser",
                type: "post",
                data: {name: acc, password: pwd, method: "login"},
                success: function (r) {
                    if (r > 0) {
                        window.location.href = "reserve.jsp";
                    } else {
                        alert("失败");
                        window.location.href = "${pageContext.request.contextPath}/view/reception/reservelogin.jsp";
                    }
                }, error: function () {
                    layui.use('layer',function () {
                        var layer = layui.layer;
                        layer.open({
                            type:0,
                            offset:'100px',
                            content:"用户名或密码错误！！！"
                        })

                    })
                }
            });
        }
    </script>
</body>
</html>